<template>
  <div class="btn-box">
    <template v-for="item of displayButtonList" :key="item.label">
      <!-- 按钮 -->
      <template v-if="!item?.children">
        <el-button v-if="!item.tooltip" :type="item.type" v-bind="item.attrs" @click="btnClick(item)">
          <SvgIcon class="mr5 icon" v-if="displaySvgIcon(item.icon)" :name="setIcon(item, 'svg')"></SvgIcon>
          {{ _transitionLanguages('button', item.label) }}
        </el-button>

        <el-tooltip v-else :content="item.tooltip" placement="top-start" effect="customized">
          <span>
            <el-button :type="item.type" v-bind="item.attrs" @click="btnClick(item)">
              <SvgIcon class="icon" v-if="displaySvgIcon(item.icon)" :name="setIcon(item, 'svg')"></SvgIcon>
              {{ _transitionLanguages('button', item.label) }}
            </el-button>
            <span></span>
          </span>
        </el-tooltip>
      </template>

      <!-- 下拉菜单 -->
      <el-dropdown v-else class="mt2" :trigger="item.trigger" v-bind="item.attrs">
        <el-button :type="item.type" v-bind="item.attrs">
          <SvgIcon class="mr5 icon" v-if="displaySvgIcon(item.icon)" :name="setIcon(item, 'svg')"></SvgIcon>
          {{ _transitionLanguages('button', item.label) }}
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <template v-for="child in item.children" :key="child.label">
              <el-dropdown-item @click="btnClick(child)" v-if="isHideBtn(child)">
                {{ _transitionLanguages('button', child.label) }}
              </el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
  </div>
</template>
<script setup lang="ts" name="proButton">
import { ButtonProps } from '@/components/GlobalButton/interface';

import SvgIcon from '@/components/SvgIcon/index.vue';

import { computed } from 'vue';

export interface ProButtonProps {
  buttonList: ButtonProps[];
  rowParams?: Object;
  rowIndex?: number;
}

const props = withDefaults(defineProps<ProButtonProps>(), {
  buttonList: () => [],
  rowIndex: -1
});

const isHideBtn = (button: ButtonProps) => {
  let flag = false;
  if (typeof button.hide === 'function') {
    flag = button.hide(props.rowParams);
  } else {
    flag = !button?.hide;
  }
  return flag;
};

// 显示的按钮
const displayButtonList = computed(() =>
  props.buttonList.filter(btn => {
    const authStore = useAuthStore();
    let flag = false;
    if (btn.permissionCode) {
      flag = isAuth(btn.permissionCode, authStore);
      if (!flag) return false;
    }

    if (typeof btn.hide === 'function') {
      flag = !btn.hide(props.rowParams);
    } else {
      flag = !btn.hide;
    }

    if (btn.display) {
      if (typeof btn.display === 'function') {
        flag = btn.display(props.rowParams);
      } else {
        flag = !!btn?.display;
      }
    }

    return flag;
  })
);

// 语言转换
const _transitionLanguages = (v: string, l: string): string => {
  return transitionLanguages(v, l);
};

// 设置图标
const setIcon = (item: ButtonProps, flag: 'el-icon' | 'svg'): string => {
  const { icon } = item;
  if (!icon) return '';
  const backIcon = flag === 'el-icon' && icon.includes('el-') ? icon.substring(3, icon.length) : icon;
  return backIcon;
};

// 是否显示svgIcon
const displaySvgIcon = (icon: string | undefined): boolean => {
  if (!icon) return false;
  return icon?.includes('el-') ? false : true;
};

// 按钮点击
const btnClick = (child: ButtonProps): void => {
  if (typeof child.methods === 'function') {
    child.methods(props.rowParams, props.rowIndex);
  }
};
</script>

<style lang="scss" scoped>
.btn-box {
  // 对于表格中的按钮设置对应距离
  .el-button + .is-link {
    margin-left: 5px;
  }
}
</style>
